$(function () {
    class GoodsDetail {
        constructor() {
            this.goods_detail = document.querySelector(".goods-detail")
            this.img = document.querySelector(".img-box img");
            this.big_img = document.querySelector(".big-img img");
            this.title = document.querySelector(".title");
            // 获取哈希值携带的id; 
            this.id = location.hash.split("=")[1];
            this.data = null;
            this.loaddetailsData(() => {
                this.render();

                new Magnifier({
                    el: ".goods-detail",
                    img: ".img-box",
                    focus: ".focus",
                    big: ".big-img",
                    big_img: ".big-img img"
                });
            });
        }
        loaddetailsData(callback) {

            let load = axios.create({
                baseURL: "http://localhost:3000/static/data/"
            })
            let options = {
                url: "/dataAll.json"
            }
            load(options)
                .then(res => {
                    this.data = res.data;
                    callback();
                })

        }
        render() {
            this.data.data.filter(item => {
                if (Number(item.product_id) === Number(this.id)) {
                    // 更改图片链接; 
                    this.img.src = item.img_url;
                    this.big_img.src = item.img_url;
                }
            })

        }
    }
    new GoodsDetail;
})